<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-html指令：
            1.作用：向指定节点渲染包含html的内容
            2.与插值语法的区别:
                (1)会替换节点的所有内容
                (2)可以识别html的内容
            3.注意！！安全性问题
                （1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
                （2）在可信内容上使用v-html，不要用在用户提交的内容上

     -->
  
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-html="name"></div>
        <div v-html="str"></div>
    </div>
    <script>
        Vue.config.productinTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                name: "尚硅谷",
                str: "<h1>啦啦啦</h1>"
            }
        })


    </script>
</body>

</html>